<template>
	<div>
		<div class="plr30">
			<div class="plr30 pt30 pb30 radius8" style="box-shadow: 0px 0px 10px  rgba(0, 0, 0, 0.05);">
				<div class="" id="my_line_chart7" style="height: 420px;"></div>
			</div>
		</div>
		<div>
			<div class="pt20 mt25">
				<div class="text-center plr30 border-bottom pb20 relative">
					<span class="fb mr20">列表</span>
					<div class="flex col-center right-btn">
						<el-button class="mt5" type="operate" @click="handleExport">导出</el-button>
						<el-button class="mt5" type="defaultBtn">编辑</el-button>
					</div>
				</div>
				<div class="plr30 mt20">
					<el-table :data="tableData" style="width: 100%" height="250"
						:cell-style="{ textAlign: 'center','line-height':'54px'}"
						:header-cell-style="{ 'text-align': 'center','line-height':'54px','height':'54px!important'  }">
						<el-table-column prop="cropYear" label="年份" />
						<el-table-column prop="cropVarietyName" label="主营产品" />
						<el-table-column prop="salesVolume" label="年销售金额" />
						<el-table-column prop="orderTotal" label="我司销售金额" />
						<el-table-column prop="percentage" label="我司销售占比" />
					</el-table>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import { saleScale } from '@/api/business/customer'
	export default {
		props:{
			customerTypeProps:{
				type:Object,
				default:{}
			},
			activeName:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				queryParams: {
					year: ''
				},
				tableData: [],
				lineChart7: null,
				yearArray:[],//年份
				arr1:[],
				arr2:[],
			}
		},
		watch:{
			activeName(){
				console.log('1111')
				let that = this
				if(this.activeName == 'message7'){
					this.saleScale()
				}
				
			}
		},
		mounted() {
			console.log(this.activeName,'activeName')
			// console.log('1111')
			// this.lineChart = echarts.init(document.getElementById("my_line_chart1"));
			// this.init();
		},
		methods: {
			// 导出
			handleExport(e) {
				this.queryParams.customerId = this.customerTypeProps.userId
				this.queryParams.cropType = 2
				this.download(
					"/customer/cropStructureExport/", {
						...this.queryParams,
					},
					`cropStructureExport_${new Date().getTime()}.xlsx`
				);
			},
			saleScale(){
				let that = this
				saleScale(this.customerTypeProps.userId).then(res=>{
					this.tableData = res.data
					const yearArray = [...new Set(this.tableData.map(item => item.cropYear))].sort((a, b) => a - b);
					this.yearArray = yearArray
					let arr1 = []
					let arr2 = []
					for(let key in this.tableData){
						arr1.push(this.tableData[key].percentage*1)
						arr2.push(this.tableData[key].orderTotal*1)
					}
					this.arr1 = arr1//我司销售占比
					this.arr2 = arr2//我司销售金额
					setTimeout(()=>{
						that.lineChart7 = echarts.init(document.getElementById("my_line_chart7"));
						that.init7();
					},200)
				})
			},
			handleQuery() {

			},
			init7() {
				this.lineChart7.setOption({
				        title: {
				          text: "销售规模及我司占比"
				        },
				        grid: {
				          left: "40px",
				          right: "10px",
				          bottom: "30px",
						   containLabel: true
				        },
				        xAxis: {
				          show: true,
				          data: this.yearArray,
				          splitLine: {
				            show: false
				          },
				          axisTick: {
				            show: false,
				            length: 20 // 竖线的长度
				          }
				        },
				        yAxis: {
				          splitLine: {
				            show: true
				          },
				          axisTick: {
				            show: false
				          },
				          axisLabel: {
				            show: true,
				            interval: "auto",
				            formatter: "{value}%"
				          }
				        },
				        series: [
				          {
							name: '我司占比',
							type: 'line',
							stack: 'Total',
							data: this.arr1
						  },
						 //  {
							// name: 'Union Ads',
							// type: 'line',
							// stack: 'Total',
							// data: [220, 182, 191, 234, 290, 330, 310]
						 //  },
				        ]
				      });
			}
		}
	}
</script>

<style>
	.right-btn {
		position: absolute;
		right: 30px;
		bottom: 10px;
	}
</style>